<template>
    <div class="shopCar-container">
        <div class="shopCar-list">
            <!-- 商品列表区域 -->
            <div class="mui-card" v-for="(item,i) in shopCarList" :key="item.id">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">

                        <img :src="item.thumb_path">


                        <div class="info">
                            <h1>{{item.title}}</h1>
                            <el-switch
                                    v-model="isTrueForId[item.id]"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    :width="60">
                            </el-switch>
                            <div class="content">
                                <span class="price">￥{{item.sell_price}}</span>
                                <el-input-number v-model="totalForId[item.id]" :min="1" :max="maxForId[item.id]"></el-input-number>
                                <a @click.prevetnt="deleteById(item.id, i)">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品结算区域 -->
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <div class="left">
                            <p>总计(不含运费)</p>
                            <p>已勾选商品 <span class="red">{{$store.getters.getAllCount}}</span> 件,总价<span class="red">￥{{$store.getters.getTotalPrice}}</span></p>
                        </div>
                        <el-button type="danger" size="medium">去结算</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ShopCarContainer",
        data() {
            return {
                name: 1,
                shopCarList: [],
                totalForId: {},
                maxForId: {},
                isTrueForId: {},
            }
        },
        created() {
            this.getShopCarList();
            this.$store.commit('getMaxForId');
            this.getMaxForId();
        },
        mounted() {
            window.mui('.mui-numbox').numbox();
            window.mui('.mui-switch')['switch']();
        },
        methods: {
            getShopCarList() {
                let idArr = [];
                this.$store.state.car.forEach(item => {
                    idArr.push(item.id);
                    this.$set(this.totalForId, item.id, parseInt(item.count));
                    this.$set(this.isTrueForId, item.id, true);
                });
                if (idArr.length <= 0) {
                    return;
                }
                this.axios.get(`goods/getshopcarlist/${idArr.join(",")}`)
                    .then(response => {
                        if (response.data.status === 0) {
                            this.shopCarList = response.data.message;
                        } else {
                            this.$toast('获取商品列表失败!');
                        }
                    });
            },
            getMaxForId() {
                this.maxForId = this.$store.getters.getMaxForId;
            },
            deleteById(id, i) {
                this.shopCarList.splice(i, 1);
                this.$store.commit('deleteById', id);
            }
        },
        watch: {
            totalForId:  {
                handler(newVal, oldVal){
                    this.$store.commit('getTotalForId', newVal);
                },
                deep: true
            },
            isTrueForId: {
                handler(newVal, oldVal){
                    this.$store.commit('getIsTrueForId', newVal);
                },
                deep: true
            }
        }
    }
</script>

<style scoped>
    .shopCar-container {
         background-color: #eee;
         overflow: hidden;
     }
    .title {
        display: inline;
    }
    .mui-numbox {
        height: 50px;
        width: 160px;
    }
    .mui-numbox .mui-input-numbox, .mui-numbox .mui-numbox-input {
        font-size: 30px;
    }
    .mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn] {
        font-size: 40px;
    }
    .content {
        font-size: 30px;
        margin-top: 40px;
    }
    .shopCar-list img {
        width: 200px;
        height: 200px;
    }
    .el-input-number {
        width: 150px;
    }
    .el-input-number >>> .el-input-number__decrease {
        font-size: 30px;
        height: 48px;
        padding: 5px 0;
    }
    .el-input-number >>> .el-input-number__increase {
        font-size: 30px;
        height: 48px;
        padding: 5px 0;
    }
    >>> .el-input {
        font-size: 25px;
    }
    >>> .el-input-number .el-input__inner {
        height: 50px;
    }
    >>> .el-switch {
        float: right;
        margin-top: 50px;
    }
    >>> .el-switch__core {
        margin: 0 0;
        width: 60px;
        height: 32px;
        border-radius: 20px;
    }
    >>> .el-switch__core:after {
        top: 0.1px;
        left: 0;
        width: 30px;
        height: 30px;
    }
    >>> .el-switch.is-checked .el-switch__core::after {
        margin-left: -30px;
    }
    .mui-card-content-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .red {
        color: red;
    }
    .mui-card p {
        font-size: 30px;
    }
    .left p {
        margin: 15px 0;
    }
    >>> .el-button--medium {
        width: 110px;
        height: 50px;
        font-size: 20px;
    }
</style>